<%@page import="com.jsz.peini.common.util.PeiniUtils"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>报名列表</title>
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href=" dist/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/index-act.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<style type="text/css">
	body{background-color: #fff;}
	</style>

  </head>
  
  <body>
   <section class="m-lists"> 
	 	<div>
	 		<ul class="lists">
	 		    <c:forEach items="${userimages }" var="info">
	 		    <li><img src="${info.image }" alt=""><span>${info.name }</span></li>
	 		    </c:forEach>
	 		</ul> 		
	 	</div>
	 </section>
  </body>
</html>
<link rel="stylesheet" href=" dist/dropload.css">
<script src="dist/dropload.min.js"></script>
<script>
	localStorage.id = "${id}";
$(function(){
    // 页数
    var page = 1;
    // 每页展示10个
    var size = 10;

    // dropload
    $('.m-lists').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据 </div>'
        },
        loadUpFn : function(me){
        var mdate = {
        		"pageNow":1,
        		"pageSize":size,
        		"id":localStorage.id
        	};
            $.ajax({
                type: 'GET',
                url: 'activity/resondetailJson',
                dataType: 'json',
                data:mdate,
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.userimages.length; i++){ 
                     		result+='<li><img src="'+data.userimages[i].image+'" alt=""><span>'+data.userimages[i].name+'</span></li>'; 
  					       
                    	};
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置页数，重新获取loadDownFn的数据
                        page = 1;
                        // 解锁loadDownFn里锁定的情况
                        me.unlock();
                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){
        
            // 拼接HTML
            var result = '';
            page++;
            var mdate = {
        		"pageNow":page,
        		"pageSize":size,
        		"id":localStorage.id
        	};
            $.ajax({
                type: 'GET',
                url: 'activity/resondetailJson',
                dataType: 'json',
                 data:mdate,
                success: function(data){
                	var arrLen = data.userimages.length; 
                    if(arrLen > 0){
                     	for(var i = 0; i < data.userimages.length; i++){ 
                     		result+='<li><img src="'+data.userimages[i].image+'" alt=""><span>'+data.userimages[i].name+'</span></li>'; 
                    	};
                    	}else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.lists').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    //alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });

});
</script>